Skip to main content

Coding7 - 🛠️ Step-by-Step: Enable CORS in Your Project

✅ Step 1: Install the cors package​

In your terminal:

npm install cors
npm install --save-dev @types/cors

✅ Step 2: Import and Use CORS Middleware​

Update your app.ts:

import 'dotenv/config';
import express from 'express';
import cors from 'cors'; // 👈 Add this
import connectDB from './dbconnect';

import authRoutes from './routes/auth.routes';
import taskRoutes from './routes/task.routes';
import reminderRoutes from './routes/reminder.routes';

const app = express();

// 🧠 Enable CORS
app.use(cors({
  origin: '*', // 👈 Allow all origins (for dev only)
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

// Parse JSON request bodies
app.use(express.json());

// API routes
app.use('/api/auth', authRoutes);
app.use('/api/tasks', taskRoutes);
app.use('/api/reminders', reminderRoutes);

// Health check
app.get('/health', (_req, res) => res.json({ message: 'Ok' }));

// Connect to MongoDB
connectDB(process.env.MONGODB_URI || '');

// Start server
app.listen(process.env.SERVER_PORT, () =>
  console.log(`🚀 Server running at http://localhost:${process.env.SERVER_PORT}`)
);

🔐 Best Practice (for Production)​

Instead of allowing *, restrict CORS to your frontend domain:

app.use(cors({
  origin: ['http://localhost:3000', 'https://yourfrontend.com'],
  credentials: true
}));

That’s it! CORS is now enabled 🎉